<template>
	<div class="grid-layout-container">
        <el-card class="box-card">
			<template #header>
				<div class="homeQueryBox flex-startCenter" style="justify-content: space-between;">
					<section class="flex-startCenter">
						<span class="mr10 personal-edit-title">客户来源</span>
					</section>
					<section class="flex">
						<section class="width280 mr10" v-if="state.status == 1">
							<DatePickerBox />
						</section>
						<el-radio-group v-model="state.status" @click="statusChange">
							<el-radio-button :label="1">自定义</el-radio-button>
							<el-radio-button :label="0">全部</el-radio-button>
						</el-radio-group>
					</section>
				</div>
			</template>
			<section style="height: 320px;">
				<PieChart :height="300" :data="state.data" /> 
			</section>
		</el-card>
	</div>
</template>

<script setup lang="ts" name="funGridLayout">
import {reactive, defineAsyncComponent } from 'vue';
const PieChart = defineAsyncComponent(() => import('/@/views/home/components/Pie.vue'));
// 定义变量内容
const state = reactive({
	status: 0,
	data: {
		tooltip: {
			trigger: "item",
			formatter: "{a} <br/>{b} : {c} ({d}%)",
			position: "bottom",
        },
		legend: {
			bottom: '0%',
			left: 'center'
		},
		series: [
			{
				name: '客户来源',
				type: 'pie',
				radius: ["0%", "70%"],
				center: ['50%', '45%'],
				avoidLabelOverlap: false,
				label: {
					normal: {
						show: false,
						position: "center",
						formatter: "总计:{c}",
					},
					emphasis: {
						show: true,
						textStyle: {
							fontSize: "16",
							fontWeight: "bold",
						},
					},
				},
				labelLine: {
					show: true,
				},
				data:[
					{ value: 30, name: '门店' },
					{ value: 30, name: '小程序' },
					{ value: 30, name: '美团' },
					{ value: 30, name: '老客推荐' },
					{ value: 30, name: '未知' },
				],
				emphasis: {
					itemStyle: {
					shadowBlur: 10,
					shadowOffsetX: 0,
					shadowColor: "rgba(0, 0, 0, 0.5)",
					},
				},
			},
		],
	}
});
</script>

<style scoped lang="scss">
.grid-layout-container {
	.box-card :deep(.el-card__header){
		padding: 10px 10px !important;
	}
	.box-card :deep(.el-card__body){
	}
	.box-card :deep(.el-card__body){
		padding: 0px !important;
	}
	.personal-edit-title {
		position: relative;
		padding-left: 10px;
		color: var(--el-text-color-regular);
		line-height: 22px;
		&::after {
			content: '';
			width: 4px;
			height: 18px;
			line-height: 22px;
			position: absolute;
			left: 0;
			top: 50%;
			transform: translateY(-50%);
			background: var(--el-color-primary);
			border-radius: 2px;
		}
	}
}
</style>
